<template>
   <div class="outSide">
      <div class="top">
        <router-link to="/"> <img  src="@/assets/img/logo.png" alt=""></router-link>
      </div>
      <div class="main">
              <span @click="goAhead(-1)"><i size="29" class="el-icon-arrow-left"></i></span>
              <span @click="goAhead(1)"><i class="el-icon-arrow-right"></i></span>
    
    <el-popover
    popper-class="el-popover"
    placement="bottom"
    width="340"
    visible-arrow=false
    trigger="click">
     <popover/>
   <el-input slot="reference" @change="toResult(input)" size="mini"  class="el-input" v-model="input" placeholder="请输入内容"></el-input>
  </el-popover>
            
          </div>
    <div class="right" >
           <div v-if="!uerInfo.avatarUrl">
           <img @click="show=!show"  src="@/assets/img/test.jpg" slot="reference"  alt="">
           <span >点击头像登录</span>
            </div>
             <div v-if="uerInfo.avatarUrl">
            <img  :src="uerInfo.avatarUrl" @click="toMyhome(uerInfo.userId,uerInfo.nickname)" slot="reference"  alt="">
            <span >{{uerInfo.nickname}}</span>
            </div>
           </div>
             <login
      v-if="show"
      />  
   </div>
</template>

<script>
import login from "@/components/login/login"
import popover from "@/components/searchResult/popover/index"
export default {
  components:{
    login,
    popover
  },
     data(){
       return{
         input:"",
         show:false,
       }
     },
   async mounted(){
       
        //  const res =await this.$request("/login/status")
        //  console.log("我是mounted",res)
    },
    computed:{
      uerInfo(){
        this.show=false
        return this.$Store.state.homePage.userName
      }
    },
     watch:{

     },
     methods:{
          toMyhome(id){  
              this.$router.push(`/MyHome?uid=${id}`)
      },
        async getSearchHot(){
       const res =await this.$request("/search/hot")
    },
      goAhead(num){ //前进与后退
        this.$router.go(num)
      },
      // 搜索跳转
      toResult(name){
         if(this.input.trim()=="") return    this.$message({
            message: '不能为空',
            type: 'warning'
         });
         this.$router.push(`/searchResult?searchWord=${this.input}`)
      },
     }
}
</script>

<style lang="less" scoped>
   .outSide{
     position: relative;
     position: fixed;
     top:0;
     z-index:999;
     width:100%;
     height:70px;
     background-color:#333;
     display:flex;
     align-items:center;
     
     padding:0 20px;
    .top{
      img{
        width: 120px;
        height:35px;
       
      }
    }
    .el-popover{
      height:300px;
    }
    .main{
      display:flex;
       margin-left:100px;
      align-items: center;
      height:100px;
     span{
       i{
     color:#fff;
    
       font-size:25px;
      //  transform: scale(0.8);
       margin: 0 12px;
      // height: 22px;
      //  width: 22px;
       border-radius: 50%;
     
       }
     }
    }
    .right{
    
      position: absolute;
      right:50px;
      div{
          display:flex;
      align-items:center;
        img{
        width:35px;
        height:35px;
        border-radius: 50%;
      }
      span{
       color:#fff;
       font-size:14px;
       padding-left:6px;
      }
      }
     
    }
   }  
</style>